<template>
    <div class="user-home">
        <div class="user-bg">
            <div class="user-info">
                <div class="user-info-my">
                    <div class="my-info">
                        <div class="my-avatar">
                            <img :src="userInfo.avatarUrl" alt="">
                        </div> 
                        <div class="my">
                            <div class="nick-name">{{userInfo.nickname}} <span> <i>Lv.{{level}}</i> </span></div>
                            <div class="music-level">
                              {{userInfo.signature}}
                            </div>
                        </div>
                    </div>
                    <div class="my-right">
                         <span>开通黑胶VIP</span><span><i class="iconfont">&#xe6c6;</i></span>
                    </div>
                </div>
                <ul class="user-nav">
                    <li>
                       <span><i class="iconfont">&#xe642;</i></span>
                       <span>本地音乐</span>
                    </li>
                    <li>
                       <span><i class="iconfont">&#xe69a;</i></span>
                       <span>下载管理</span>
                    </li>
                    <li>
                       <span><i class="iconfont">&#xe607;</i></span>
                       <span>我的电台</span>
                    </li>
                    <li>
                       <span><i class="iconfont">&#xe631;</i></span>
                       <span>我的收藏</span>
                    </li>
                    <li>
                       <span><i class="iconfont">&#xe66f;</i></span>
                       <span>关注新歌</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="user-music-info">
            <div class="user-title">
                <div class="name">我的音乐</div>
                <div class="user-right-icon">
                    <span><i class="iconfont">&#xe649;</i></span>
                    <span><i class="iconfont">&#xe6c6;</i></span>
                </div>
            </div>
            <ul class="my-like-list">
                <li>
                    <div class="like-bg" v-if="likeMusicInfo.al" :style="{'backgroundImage':`url(${likeMusicInfo.al.picUrl})`}">
                        <div class="like-icon">
                            <div class="icon-name">
                                <span><i class="iconfont">&#xe686;</i></span>
                                <span>我喜欢的音乐</span>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="like-bg" v-if="likeMusicInfo.al" :style="{'backgroundImage':`url(${peopleFm.album.picUrl})`}">
                        <div class="like-icon">
                            <div class="icon-name">
                                <span><i class="iconfont" style="color:#fff">&#xe632;</i></span>
                                <span>私人FM</span>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="like-bg" v-if="likeMusicInfo.al" style="background:#ddd">
                        <div class="like-icon">
                            <div class="icon-name">
                                <span><i class="iconfont" style="color:#fff">&#xe603;</i></span>
                                <span>运动频道</span>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="user-title">
                <div class="name">最近播放</div>
                <div class="user-right-icon">
                    <span>更多</span>
                    <span><i class="iconfont">&#xe6c6;</i></span>
                </div>
            </div>
            <div class="sow-music">
                <div class="sow-item">
                    <div class="sow-music-img" v-if="sowMusic.al">
                        <img :src="sowMusic.al.picUrl" alt="">
                        <div class="play-icon"><span><i class="iconfont">&#xe84d;</i></span></div>
                    </div>
                    <div class="sow-all">
                        <div class="all-name">全部已播歌曲</div>
                        <div class="sow-num">100首</div>
                    </div>
                </div>
                <div class="sow-item">
                    <div class="sow-music-img" v-if="songSheet.picUrl">
                        <img :src="songSheet.picUrl" v-lazy="songSheet.picUrl" alt="">
                        <div class="play-icon"><span><i class="iconfont">&#xe84d;</i></span></div>
                    </div>
                    <div class="sow-all">
                        <div class="all-name">歌单：{{songSheet.name}}</div>
                        <div class="sow-num">继续播放</div>
                    </div>
                </div>
            </div>
            <div class="user-title">
                <div class="name">收藏歌单</div>
            </div>
            <sheet-item :list="collectSheet"/>
        </div>
    </div>
</template>
<script>
import {mapState} from 'vuex'
import sheetItem from './sheet-item'
export default {
    name:'user',
    components:{
        sheetItem
    },
    data() {
        return {
           userInfo:'',
           level:'',
           likeSongList:[],
           likeMusicInfo:'',
           peopleFm:'',
           sowMusic:'',
           songSheet:'',
           collectSheet:[]
        }
    },
    methods:{
        //获取用户信息
        async getUserInfo() {
            let userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
            this.userInfo = userInfo.profile;
            let res = await this.Public.user.getUserDetail({uid:userInfo.profile.userId})
            this.userInfo = res.profile;
            this.level = res.level;
        },
        //喜欢的音乐列表
        async getLikeMuisc() {
            let res= await this.Public.user.userLikeMuiscList({id:'531980'})
            let likeMusic = await this.Public.getMusicDetail({ids:res.ids.join(',')})
            this.likeSongList = likeMusic.songs;
            this.likeMusicInfo = likeMusic.songs[0]
        },
        //获取推荐歌单
        getEveryDayRecommendSongs() {
            this.Public.recommend.getEveryDayRecommendSongs().then(res =>{
                this.songSheet = res.recommend[0]
            })
        },
        //私人FM
        getUserFmList() {
            this.Public.user.getUserFm().then(res => {
                if(res.code == 200)
                this.peopleFm = res.data[0]
            })
        },
        //获取用户播放记录
        async getUserRecord() {
            let res = await this.Public.user.getUserRecord({
                uid:this.userInfo.userId,
                type:1
            })
             this.sowMusic = res.weekData[1].song;
        },
        //收藏歌单
        getUserCollectSongSheet() {
            this.Public.user.getUserCollectSongSheet({uid:this.userInfo.userId}).then(res=>{
                if(res.code == 200) {
                    this.collectSheet = res.playlist;
                }
            })
        },
       
    },
    created() {
        this.getUserInfo()
        this.getLikeMuisc()
        this.getUserFmList()
        this.getUserRecord()
        this.getEveryDayRecommendSongs()
        this.getUserCollectSongSheet()
    },
}
</script>
<style lang="less" scoped>
    .user-home{
        width: 100%;
        height: 100%;
        .user-bg{
            position: relative;
            width: 100%;
            height: 38%;
            z-index: 1;
           // background-color:rgba(0,0,0);
            background:url('../../../assets/img/user-bg.jpg');
            background-color:rgba(0,0,0,1);
            background-size: cover;
            background-position : center;
            .user-info{
                position: absolute;
                top:0px;
                left: 0px;
                width: 100%;
                height: 100%;
                background-color:rgba(0,0,0,.5);
                z-index: 11;
                display: flex;
                align-items: center;
                .user-info-my{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding:0px 30px;
                    width: 100%;
                    margin-top:-40px;
                    box-sizing: border-box;
                    .my-info{
                        display: flex;
                        align-items: center;
                        justify-content: space-around;
                        .my-avatar{
                            width: 120px;
                            height: 120px;
                            border-radius: 50%;
                            img{
                                width: 100%;
                                border-radius: 50%;
                            }
                        }
                        .my{
                            margin-left: 30px;
                            .nick-name{
                                color: #fff;
                                font-size: 32px;
                                font-weight: 600;
                                span{
                                   display: inline-block;
                                   font-weight: 300;
                                   font-size: 26px;
                                   padding: 4px 12px;
                                   border-radius: 20px;
                                   background: rgba(223,223,223,.6);
                                }
                            }
                            .music-level{
                                margin-top:10px;
                                
                                color: #dddddd;
                                
                            }
                        }

                    }
                    .my-right{
                        display: flex;
                        align-items: center;
                        font-size: 24px;
                        span{
                            display: inline-block;
                            margin-right: 10px;
                            color:#acacac;
                        }
                    }
                }
                .user-nav{
                    position: absolute;
                    bottom: 40px;
                    left: 0;
                    right: 0;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    padding:0px 30px;
                    li{
                        flex:1;
                       
                        text-align: center;
                        color: #fff;
                        span{
                            display: block;
                            font-size: 22px;
                            margin-bottom: 16px;
                            .iconfont{
                                font-size: 60px;
                            }
                        }
                        &:first-child{
                            margin-left: 0px;
                        }
                    }
                }
            }  
        }
        .user-music-info{
            position: relative;
            top:-38px;
            border-radius: 48px 48px 0px 0px;
            background: #fff;
            z-index: 15;
            padding:40px 20px 0px 20px;
            .user-title{
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top:15px;
                .name{
                    font-size: 30px;
                    color: #000;
                    font-weight: 600;
                }
                .user-right-icon{
                    display: flex;
                    align-items: center;
                    span{
                        .iconfont{
                            font-size: 32px;
                        }
                        display: inline-block;
                        margin-left: 5px;
                    }
                }
            }
            .my-like-list{
                margin: 20px -20px 20px 0px;
                overflow: hidden;
                display: flex;
                justify-content: space-around;
                li{
                    flex:1;
                    margin-right: 20px;
                    height: 300px;
                    
                    .like-bg{
                        position: relative;
                        width: 100%;
                        height: 100%;
                        background-size: cover;
                        background-repeat: no-repeat;
                        background-position: center;
                        border-radius: 10px;
                        .like-icon{
                            position: absolute;
                            top:0px;
                            left: 0;
                            bottom: 0;
                            right: 0;
                            background-color: rgba(0,0,0,0.5);
                            border-radius: 10px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            .icon-name{
                                display: flex;
                                flex-direction: column;
                                color: #fff;
                                align-items: center;
                                span{
                                    margin-top:10px;
                                    .iconfont{
                                        font-size: 54px;
                                        color:@color2;
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .sow-music{
                margin: 20px -20px 20px 0px;
                display: flex;
                align-items: center;
                overflow: hidden;
                .sow-item{
                    flex:1;
                    display: flex;
                    align-items: center;
                    
                    margin-right: 20px;
                    height: 130px;
                    .sow-music-img{
                        position: relative;
                        width: 120px;
                        height: 120px;
                        border-radius: 10px;
                        img{
                            width: 100%;
                            height: 100%;
                            border-radius: 10px;
                            
                        }
                        .play-icon{
                            position: absolute;
                            top:0;
                            left: 0;
                            bottom: 0;
                            right: 0;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            span{
                                display: inline-block;
                                width: 50px;
                                height: 50px;
                                background: rgba(255,255,255,.8);
                                border-radius: 50%;
                                line-height: 50px;
                                text-align: center;
                                .iconfont{
                                    font-size: 42px;
                                    color: #e81732;
                                }
                            }
                            
                        }
                        
                    }
                    .sow-all{
                        flex:1;
                        margin-left: 20px;
                        .all-name{
                            font-size: 26px;
                            overflow : hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                        }
                        .sow-num{
                            margin-top: 10px;
                            color: #c2c2c2;
                        }
                    }
                }
            }
            
        }
    }
</style>